<template>
  <div class="register-bgc">

    <div class="option-site">
      <div class="head">
        <div :class="{active: 0 === currentIndex}">同意协议</div>
        <div :class="{active: 1 === currentIndex}">进行注册</div>
        <div :class="{active: 2 === currentIndex}">完善信息</div>
      </div>

      <div class="content">
        <RegisterAgree v-if="0 === currentIndex" @ready="mChangeCurrentIndex"></RegisterAgree>
        <RegisterGo v-if="1 === currentIndex" @ready="mChangeCurrentIndex"></RegisterGo>
        <RegisterInfoPrefect v-if="2 === currentIndex"></RegisterInfoPrefect>
      </div>

    </div>

  </div>
</template>

<script>
  import RegisterAgree from "./childComps/RegisterAgree";
  import RegisterGo from "./childComps/RegisterGo";
  import RegisterInfoPrefect from "./childComps/RegisterInfoPrefect";

  export default {
    name: "Register",
    data() {
      return {
        buttonValue: '同   意   协   议',
        contentActive: false,
        currentIndex: 0
      }
    },
    components: {
      RegisterAgree,
      RegisterGo,
      RegisterInfoPrefect
    },
    methods: {
      mChangeCurrentIndex (btnValue) {
        this.currentIndex = btnValue
      }
    }
  }
</script>

<style scoped>
  .register-bgc {
    width: 100%;
    height: 100vh;
    background: url("~assets/img/login-bgc.jpg") no-repeat;
    background-size: 100% 100%;

    /*background-color: red;*/
  }
  .option-site {
    position: relative;
    right: -50%;
    top: 15%;

    width: 70vh;
    height: 70vh;

    background-color: #bdbdbd;
  }
  .head {
    display: flex;

    height: 10%;
    background-color: #bdbdbd;

    /*background-color: yellow;*/
  }
  .head div {
    flex: 1;
    text-align: center;
    font-size: 30px;

    /*background-color: green;*/
    /*border: 2px solid rgba(0, 0, 0, 1);*/
  }
  .content {
    height: 90%;
    /*background-color: blue;*/
  }

  .active {
    color: red;
    border-bottom: 4px solid red;
  }
</style>